<!-- <script>
import ReusableDialogForm from '@/components/ReusableDialogForm.vue'
export default {
  components: {
    ReusableDialogForm,
  },
  data() {
    return {
      searchKeyword:'',
      currentPage4: 4,
      newDialogVisible: false,
      changeDialogVisible:false,
      filteredData: [],
      tableDatas: [],
      newTableData: {
        categoryName: '',
        remark: '',
        orderNum: '0'
      },
      //分页相关的状态
      page: {
        pageNum: 1,  //当前在第几页
        pageSize: 20, //每页的条数
        total: 0 //总条数
      },
      rulesNewData: {
        categoryName: [
          { required: true, message: '请输入产品分类名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        orderNum: [
          { type: 'number', required: true, message: '请输入数字', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    this.getTableDatas()
  },
  methods: {
    //搜索功能
   onSearchProduct() {
    console.log(this.tableDatas,this.filteredData);
    this.filteredData = this.tableDatas.filter(item => {
      console.log(item.categoryName);
      return item.categoryName.toLowerCase().includes(this.searchKeyword.toLowerCase());
    });
    if(this.filteredData.length===0){
      this.$message.error('找不到目标')
      this.tableDatas=[]
    }
    },
    onResettingData(){
      this.searchKeyword=''
      this.getTableDatas()
    },
    //获取服务器数据
    async getTableDatas() {
      let { page: { pageNum, pageSize } } = this
      try {
        let { code, rows, total } = await this.$API.queryProductList(
          { pageNum, pageSize }
        )
        if (+code !== 200) {
          rows = []
          total = 0
        }
        this.page.total = total
        this.tableDatas = Object.freeze(rows)
        this.$message.success('表单刷新成功')
      } catch (error) {
        this.$message({
          type: "error",
          message: '表单获取失败'
        })
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getTableDatas();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getTableDatas();
    },


   
    onOpenNewDialog() {
      this.newDialogVisible = true
    },
    onOpenChangeDialog(row){
      // console.log(row);
      this.newTableData.categoryName = row.categoryName;
      this.newTableData.remark = row.remark;
      this.newTableData.orderNum = row.orderNum;
      this.changeDialogVisible=true
    },
    changeNewConfirm(){
      console.log('1');
      this.$nextTick(() => {
        // 使用 this.$refs.formRef.validate 来进行表单验证
        this.$refs.changedialogRef.$refs.formRef.validate(async (valid) => {
          if (valid) {
            try {
              const { categoryName, remark, orderNum } = this.newTableData;
              // 如果表单验证通过，才执行数据提交
              await this.$API.queryProductChangeList(categoryName, remark, orderNum);
              console.log(this.$API.queryProductChangeList(categoryName, remark, orderNum));
              await this.getTableDatas();
              this.changeDialogVisible = false;
              this.$message.success('任务修改成功');
            } catch (error) {
              // 错误处理
              this.$message.error('任务修改失败');
            }
          } else {
            // 显示表单验证失败消息
            this.$message.error('表单验证失败');
          }
        });
      })
    },
    handleNewConfirm() {
      this.$nextTick(() => {
        // 使用 this.$refs.formRef.validate 来进行表单验证
        console.log(this.$refs.dialogRef.$refs.formRef);
        this.$refs.dialogRef.$refs.formRef.validate(async (valid) => {
          console.log('Validation result:', valid); // 添加调试语句
          if (valid) {
            try {
              const { categoryName, remark, orderNum } = this.newTableData;
              // 如果表单验证通过，才执行数据提交
              await this.$API.queryProductAddList(categoryName, remark, orderNum);
              await this.getTableDatas();
              this.newDialogVisible = false;
              // 清空表单数据
              this.newTableData.categoryName = '';
              this.newTableData.remark = '';
              this.newTableData.orderNum = '0';
              this.$message.success('任务创建成功');
            } catch (error) {
              // 错误处理
              this.$message.error('提交数据时发生错误');
            }
          } else {
            // 显示表单验证失败消息
            this.$message.error('表单验证失败');
          }
        });
      })
    }

  },


}
</script>

<template>
  <div class="app">
    <div class="formHeader">
      <el-form :inline="true">
        <el-form-item label="分类名称" class="title">
          <el-input placeholder="请输入产品分类名称" v-model="searchKeyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearchProduct" icon="el-icon-search">搜索</el-button>
          <el-button @click="onResettingData" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-button type="primary" icon="el-icon-plus" plain @click="onOpenNewDialog">新增</el-button>
      </el-form>
    </div>

    <div class="table">
      <el-table :data="this.filteredData.length===0?tableDatas:filteredData" border show-header highlight-current-row row>
        <el-table-column prop="categoryName" label="产品分类名称" width="180">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="300">
        </el-table-column>
        <el-table-column prop="isSys" label="系统定义" width="180">
          <template v-slot:default="slotProps">
            {{ slotProps.row.isSys === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="显示顺序" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template v-slot:default="scope">
            <el-button type="primary" icon="el-icon-view" @click="onOpenChangeDialog(scope.row)" >查看</el-button>
          </template>
        </el-table-column>
        <template #append>
          <el-pagination background layout="sizes, prev, pager, next" hide-on-single-page :total="page.total"
            :page-size="page.pageSize" :current-page="page.pageNum" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </template>
      </el-table>
    </div>
    <ReusableDialogForm
      :footname="'新增'"
      :dialogTitle="'产品分类'"
      :dialogWidth="'50%'"
      :visible.sync="newDialogVisible"
      :formData="newTableData"
      :formRules="rulesNewData"
      ref="dialogRef"
      @confirm="handleNewConfirm"
    ></ReusableDialogForm>
    <ReusableDialogForm
      :footname="'修改'"
      :dialogTitle="'修改产品分类'"
      :dialogWidth="'50%'"
      :visible.sync="changeDialogVisible"
      :formData="newTableData"
      :formRules="rulesNewData"
      ref="changedialogRef"
      @confirm="changeNewConfirm"
    ></ReusableDialogForm>
  </div>
</template>

<style lang="less" scoped>
.app {
  padding: 20px;

  .formHeader {
    display: flex;
    justify-content: space-between;
    border: 1px solid #eee;
    padding: 20px 20px 0 20px;
    background-color: #fff;
    box-shadow: 0px 10px 10px #e0dfdf;

    .title {
      font-weight: bolder;
    }

    .el-button {
      border-radius: 20%;
    }

  }

  .table {
    .el-table {
      margin-top: 10px;
      background-color: #fff;

      :deep(.cell) {
        text-align: center;
      }

      .el-pagination {
        padding-top: 20px;
        text-align: right;
      }
    }

  }

  
}
</style> -->







<script>
import ReusableDialogForm from '@/components/ReusableDialogForm.vue'
export default {
  components: {
    ReusableDialogForm,
  },
  data() {
    return {
      searchKeyword: '',
      currentPage4: 4,
      newDialogVisible: false,
      changeDialogVisible: false,
      tableDatas: [],
      newTableData: {
        categoryName: '',
        remark: '',
        orderNum: '0'
      },
      //分页相关的状态
      page: {
        pageNum: 1,  //当前在第几页
        pageSize: 20, //每页的条数
        total: 0 //总条数
      },
      rulesNewData: {
        categoryName: [
          { required: true, message: '请输入产品分类名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        orderNum: [
          { type: 'number', required: true, message: '请输入数字', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    this.getTableDatas()
  },
  methods: {
    //搜索功能
    async onSearchProduct() {
      try {
        const data = await this.$API.queryProductList({
          pageNum: 1,
          pageSize: 20,
          categoryName: this.searchKeyword, // 传递搜索关键词到接口
        }); // 查询第一页数据
        this.tableDatas = Object.freeze(data.rows); // 将获取的数据存储在 tableData 中
      } catch (error) {
        this.$message({
          type: "error",
          message: '找不到目标'
        })
      }
    },
    onResettingData() {
      this.searchKeyword = ''
      this.getTableDatas()
    },
    //获取服务器数据
    async getTableDatas() {
      let { page: { pageNum, pageSize } } = this
      try {
        let { code, rows, total } = await this.$API.queryProductList(
          { pageNum, pageSize }
        )
        if (+code !== 200) {
          rows = []
          total = 0
        }
        this.page.total = total
        this.tableDatas = Object.freeze(rows)
        this.$message.success('表单刷新成功')
      } catch (error) {
        this.$message({
          type: "error",
          message: '表单获取失败'
        })
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getTableDatas();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getTableDatas();
    },



    onOpenNewDialog() {
      this.newDialogVisible = true
    },
    onOpenChangeDialog(row) {
      // console.log(row);
      this.newTableData.categoryName = row.categoryName;
      this.newTableData.remark = row.remark;
      this.newTableData.orderNum = row.orderNum;
      this.changeDialogVisible = true
    },
    changeNewConfirm() {
      console.log('1');
      this.$nextTick(() => {
        // 使用 this.$refs.formRef.validate 来进行表单验证
        this.$refs.changedialogRef.$refs.formRef.validate(async (valid) => {
          if (valid) {
            try {
              const { categoryName, remark, orderNum } = this.newTableData;
              // 如果表单验证通过，才执行数据提交
              await this.$API.queryProductChangeList(categoryName, remark, orderNum);
              console.log(this.$API.queryProductChangeList(categoryName, remark, orderNum));
              await this.getTableDatas();
              this.changeDialogVisible = false;
              this.$message.success('任务修改成功');
            } catch (error) {
              // 错误处理
              this.$message.error('任务修改失败');
            }
          } else {
            // 显示表单验证失败消息
            this.$message.error('表单验证失败');
          }
        });
      })
    },
    handleNewConfirm() {
      this.$nextTick(() => {
        // 使用 this.$refs.formRef.validate 来进行表单验证
        console.log(this.$refs.dialogRef.$refs.formRef);
        this.$refs.dialogRef.$refs.formRef.validate(async (valid) => {
          console.log('Validation result:', valid); // 添加调试语句
          if (valid) {
            try {
              const { categoryName, remark, orderNum } = this.newTableData;
              // 如果表单验证通过，才执行数据提交
              await this.$API.queryProductAddList(categoryName, remark, orderNum);
              await this.getTableDatas();
              this.newDialogVisible = false;
              // 清空表单数据
              this.newTableData.categoryName = '';
              this.newTableData.remark = '';
              this.newTableData.orderNum = '0';
              this.$message.success('任务创建成功');
            } catch (error) {
              // 错误处理
              this.$message.error('提交数据时发生错误');
            }
          } else {
            // 显示表单验证失败消息
            this.$message.error('表单验证失败');
          }
        });
      })
    }

  },


}
</script>

<template>
  <div class="app">
    <div class="formHeader">
      <el-form :inline="true">
        <el-form-item label="分类名称" class="title">
          <el-input placeholder="请输入产品分类名称" v-model="searchKeyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearchProduct" icon="el-icon-search">搜索</el-button>
          <el-button @click="onResettingData" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-button type="primary" icon="el-icon-plus" plain @click="onOpenNewDialog">新增</el-button>
      </el-form>
    </div>

    <div class="table">
      <el-table :data="tableDatas" border show-header highlight-current-row row>
        <el-table-column prop="categoryName" label="产品分类名称" width="180">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="300">
        </el-table-column>
        <el-table-column prop="isSys" label="系统定义" min-width="40%">
          <template v-slot:default="slotProps">
            {{ slotProps.row.isSys === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="显示顺序" min-width="30%">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="address" label="操作" min-width="30%">
          <template v-slot:default="scope">
            <el-button type="primary" icon="el-icon-view" @click="onOpenChangeDialog(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <template #append>
          <el-pagination background layout="sizes, prev, pager, next" hide-on-single-page :total="page.total"
            :page-size="page.pageSize" :current-page="page.pageNum" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </template>
      </el-table>
    </div>
    <ReusableDialogForm :footname="'新增'" :dialogTitle="'产品分类'" :dialogWidth="'50%'" :visible.sync="newDialogVisible"
      :formData="newTableData" :formRules="rulesNewData" ref="dialogRef" @confirm="handleNewConfirm"></ReusableDialogForm>
    <ReusableDialogForm :footname="'修改'" :dialogTitle="'修改产品分类'" :dialogWidth="'50%'" :visible.sync="changeDialogVisible"
      :formData="newTableData" :formRules="rulesNewData" ref="changedialogRef" @confirm="changeNewConfirm">
    </ReusableDialogForm>
  </div>
</template>

<style lang="less" scoped>
.app {
  padding: 20px;

  .formHeader {
    display: flex;
    justify-content: space-between;
    border: 1px solid #eee;
    padding: 20px 20px 0 20px;
    background-color: #fff;
    box-shadow: 0px 10px 10px #e0dfdf;

    .title {
      font-weight: bolder;
    }

    .el-button {
      border-radius: 20%;
    }

  }

  .table {
    // min-width: 800px;
    .el-table {
      // min-width: 800px;
      margin-top: 10px;
      background-color: #fff;

      :deep(.cell) {
        text-align: center;
      }

      .el-pagination {
        padding-top: 20px;
        text-align: right;
      }
    }

  }


}
</style>